<template>
  <div class="viewEquip-containner">
    <div class="equipNav clearfix">
      <div class="leftTop">
        <p class="leftTitle">查看详情</p>
      </div>
      <div class="rightBtn" @click="goBack()">
        < 返回
      </div>
    </div>
    <div class="formContent">
      <div class="firstTitle">
        <span class="info">基本信息</span>
        <span class="down" @click="open1"><i class="el-icon-arrow-down"></i></span>
      </div>
      <!-- -->
      <div class="firstContent" v-show="openContent">
        <div class="contentInfo1" >
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                出厂编号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.equip_cid" />
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                创建时间：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.creator_time"/>
              </div>
            </el-col>
            <!--<el-col :span="4">-->
              <!--<div class="grid-content bg-purple-light" style="text-align: right">-->
                <!--设备分类：-->
              <!--</div>-->
            <!--</el-col>-->
            <!--<el-col :span="5">-->
              <!--<div class="grid-content bg-purple-light">-->
                <!--<input disabled class="disableInput" v-model="detailform.equip_class_label" />-->
              <!--</div>-->
            <!--</el-col>-->
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                状态：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.status_label"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                名称：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled v-model="detailform.name_label" class="longInput disableInput"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                品牌：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.brand_label" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                类型：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.type_label" />
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                型号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.model"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                操作方式：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.operation_mode_label" />
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                结构形式：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.structure"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                跨度(m)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.span"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                工作级别：
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.work_level_label"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                大车轨道长度(m)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.cantilever_length"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                轨道型号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.big_car_track_model"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                起升高度(m)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.lifting_height"/>
              </div>
            </el-col>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                额定功率(kW)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.whole_rated_power"/>
              </div>
            </el-col>
          </el-row>
          <el-row v-for="(lifting, index) in liftingRated" :key="index">
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                主起升机构{{ index+1 }}#功率(kW)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" :value= lifting.power>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                主起升机构{{ index+1 }}#电流(A)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" :value= lifting.current>
              </div>
            </el-col>
            <br/>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                主起升机构{{ index+1 }}#额定重量(t)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="shortInput" :value= lifting.weight>
                <input disabled class="shortInput" :value= lifting.weight_standard>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                主起升机构{{ index+1 }}#速度(m/min)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" :value= lifting.speed>
              </div>
            </el-col>
          </el-row>
          <el-row v-for="(smallCar, index) in smallCarRated" :key="index+5">
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                小车机构{{ index+1 }}#功率(kW)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="shortInput" :value= smallCar.power>
                <input disabled class="shortInput" :value= smallCar.power_standard>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                小车机构{{ index+1 }}#电流(A)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="shortInput" :value= smallCar.current>
                <input disabled class="shortInput" :value= smallCar.current_standard>
              </div>
            </el-col>
            <br/>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                小车机构{{ index+1 }}#速度(m/min)：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" :value= smallCar.speed>
              </div>
            </el-col>
          </el-row>
          <el-row v-for="(bigCar, index) in bigCarRated" :key="index+10">
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                大车机构额定功率(kW)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="shortInput" :value= bigCar.power>
                <input disabled class="shortInput" :value= bigCar.power_standard>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                大车机构电流(A)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="shortInput" :value= bigCar.current>
                <input disabled class="shortInput" :value= bigCar.current_standard>
              </div>
            </el-col>
            <br/>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                大车机构速度(m/min)：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" :value= bigCar.speed>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                安装位置：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <input disabled v-model="detailform.install_position" class="longInput disableInput"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                适用范围：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <input disabled v-model="detailform.range" class="longInput disableInput"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="twoTitle">
        <span class="info">管理信息</span>
        <span class="down" @click="open2"><i class="el-icon-arrow-down"></i></span>
      </div>
      <div class="twoContent" v-show="openContent1">
        <div class="contentInfo2">
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                制造商：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.manufacturer"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                所属项目：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.project"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                出厂日期：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.produce_date"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                所属用户：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.user_name"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                保修期限(月)：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.defects_liability_period"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                所属车间：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.workshop"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                厂家服务电话：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.produce"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                设备负责人：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.equip_person_liable"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                交付使用或取证时间：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.delivery_time"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                行业类别：
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.industry_type_label" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                使用登记编号：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.register_number"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                服务商名称：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.service_provider"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                下次年审时间：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.next_annual_trial">
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                服务商联系人：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.service_contacts"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                设备价格：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple">
                <input disabled class="disableInput" v-model="detailform.equip_price"/>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light" style="text-align: right">
                服务商联系电话：
              </div>
            </el-col>
            <el-col :span="5">
              <div class="grid-content bg-purple-light">
                <input disabled class="disableInput" v-model="detailform.service_tel"/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                设备图片：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <img width="150px" :src="picture">
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="text-align: right">
              <div class="grid-content bg-purple">
                备注：
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple">
                <textarea disabled class="disableInput" v-model="detailform.remark"></textarea>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="equipFooter">
      <!--创朝夕相处-->
      <el-button type="primary" @click="updateE">编辑</el-button>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import Axios from 'axios'
  export default {
    props: ['userIndex', 'userRow'],
    data() {
      return {
        detailform: {},
        // ---------------------------
        openContent: true,
        openContent1: true,
        show: '',
        // 主起升循环数据
        liftingRated: [],
        // 小车循环数据
        smallCarRated: [],
        // 大车循环数据
        bigCarRated: [],
        // 图片显示
        picture: '',
        // 获取查看接口
        equipdetaildata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_byid',
          id: this.$route.query.cid
        }
      }
    },
    created: function() {
      this.show = document.getElementsByClassName('contentInfo1')
      console.log(333)
      console.log(this.show)
      this.openContent = true
    },
    mounted() {
      this.equipdetail()
    },
    methods: {
      goBack() {
        this.$router.push({ path: '/monitor/homepage/grab' })
      },
      updateE() { // 编辑设备
        this.$router.push({
          path: '/update',
          query: {
            cid: this.$route.query.cid
          }
        })
      },
      open1() {
        this.openContent = !this.openContent
      },
      open2() {
        this.openContent1 = !this.openContent1
      },
      // 接受父组件的值
      formParent() {
        console.log(this.userIndex)
        console.log(this.userRow)
      },
      // 查看接口
      equipdetail() {
        axios.post('/equipmanage', this.equipdetaildata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.detailform = res.data.data
          if (res.data.data.attachment.length === 0) {
            var showpicture = Axios.defaults.baseURL + '///'
          } else {
            var path = res.data.data.attachment[0].path
            showpicture = Axios.defaults.baseURL + '/' + path
          }
          // var path = res.data.data.attachment[0].path
          // var showpicture = 'http://127.0.0.1/' + path
          this.picture = showpicture
          this.smallCarRated = res.data.data.small_car_rated
          this.liftingRated = res.data.data.lifting_rated
          this.bigCarRated = res.data.data.big_car_rated
          console.log(res)
          console.log(this.smallCarRated)
          console.log(this.bigCarRated)
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .viewEquip-containner{
    width: 100%;
    min-height: 100%;
    .equipNav{
      width: 100%;
      height: 50px;
      .leftTop{
        width: 50%;
        height: 50px;
        float: left;
        margin: 0 0 0 20px ;
        font-size:16px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(50,56,66,1);

        .leftTitle{
          font-size: 16px;
          color: #676A70;
          padding-left: 5px;
          border-left: 5px solid #25B6C7;
          height: 16px;
        }
      }
      .rightBtn{
        float: right;
        font-size:14px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(37,183,200,1);
        cursor: pointer;
        margin: 15px 20px 0 0 ;
      }
      .clearfix:after{
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }
    .formContent{
      width: 98%;
      height: 800px;
      margin-left: 20px;
      border: 1px solid #DDE2EB;
      //  position: relative;
      overflow: auto;
      /*border: 1px solid red;*/

      .firstContent{
        width: 100%;
        min-height: 590px;
        /*border: 1px solid fuchsia;*/
      }
      .firstTitle{
        width: 99%;
        height: 40px;
        margin-left: 10px;
        border-bottom: 1px solid #DDE2EB;
        // position: relative;
        /*border: 1px solid greenyellow;*/
        .info{
          font-size:14px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(50,56,66,1);
          float: left;
          line-height: 40px;
        }
        .down{
          float: right;
          line-height: 40px;
          cursor: pointer;
        }
      }
      .twoContent{
        width: 100%;
        height: 490px;
        margin-top: 30px;

        /*border-bottom: 1px solid #DDE2EB;*/
      }

      .twoTitle{
        width: 99%;
        height: 40px;
        margin-left: 10px;
        border-bottom: 1px solid #DDE2EB;
        // position: relative;
        margin-top: 20px;
        .info{
          font-size:14px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:rgba(50,56,66,1);
          float: left;
          line-height: 40px;
        }
        .down{
          float: right;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }
    .contentInfo1{
      width: 1200px;
      min-height: 1px;
      // position: relative;
      margin-top: 30px;
      line-height: 37px;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      /*border: 1px solid red;*/
    }
    .contentInfo2{
      width: 1200px;
      min-height: 1px;
      // position: relative;
      margin-top: 30px;
      line-height: 37px;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(105,114,126,1);
      /*border: 1px solid red;*/
    }
  }
  @media screen and(min-width: 1366px) {
    .formContent {
      width: 98%;
      height: 550px;
      border: 1px solid #DDE2EB;
      // position: relative;
      overflow: auto;
    }
  }
  /************输入框与文本域样式************/
  input{
    width: 250px;
    height: 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    text-indent: 15px;
  }
  textarea{
    margin-top: 10px;
    outline: none;
    width: 700px;
    height: 107px;
    border: 9px solid #fff;
    border-radius: 4px;
  }
  .disableInput{
    border: none;
    background-color: #fff;
    color: #000;
  }
  .shortInput{
    width: 120px;
  }
  .longInput{
    width: 700px;
  }
  /************下拉框样式************/
  /deep/ .el-input__inner{
    height: 25px;
    width: 250px;
    outline: none;
  }
  /************底部按钮样式************/
  .equipFooter{
    margin-top: 10px;
    float: right;
    width: 94px;
  }
  /deep/ .el-button{
    padding: 8px 15px;
    width: 80px;
    height: 30px;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
</style>
